<#import "/WEB-INF/freemarker_macro/mallPage.ftl" as mypage>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>***</title>
<meta name="robots" content="all" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="Identifier-URL" content="" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link rel="Bookmark" href="/favicon.ico" type="image/x-icon" />
<link href="${base}/css/mall/reset.css" rel="stylesheet" type="text/css" />
<link href="${base}/css/mall/webmain.css" rel="stylesheet" type="text/css" />
<link href="${base}/css/mall/ddsmoothmenu.css" rel="stylesheet" type="text/css" />
<link href="${base}/css/mall/main.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="${base}/css/mall/menu.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
var webRoot = "${base}";
</script>
<script type="text/javascript" src="${base}/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="${base}/js/mall/jquery.KinSlideshow-1.2.1.js"></script>
<script type="text/javascript" src="${base}/js/mall/webtry_roll.js"></script>
<script type="text/javascript" src="${base}/js/mall/ddsmoothmenu.js"></script>
<script type="text/javascript" src="${base}/js/mall/CJL.0.1.min.js"></script>
<script type="text/javascript" src="${base}/js/mall/ImageZoom.js"></script>
<script type="text/javascript">
ddsmoothmenu.init({
	mainmenuid: "MainMenu", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

function doSearch(curPage,perPage){
	$("#curPage").val(curPage);
	$("#perPage").val(perPage);
	$("#prodSearchForm").submit();
}
</script>
</head>
<body>
		<div id="wrapper">
			<#include "/WEB-INF/mall/${language}/head.html" parse=true>
			<div id="page_main" class="clearfix">
				<div class="page-right">
					<div class="site-nav">
						<span>当前位置 : </span><a href="${base}/indexMall.do">公司主页</a> &gt;&gt;
						<a href="${base}/product.do?pid=${product.prodId}" title="${product.prodName}">${product.prodName}</a>
					</div>
					<div class="wrap_r">
						<div class="goods">
							 <h1>${product.prodName}</h1>
							 <div class="img">
			                    <div class="container"> <img id="idImage2" class="izImage2" />
			                        <div id="idViewer2" class="izViewer2"></div>
			                    </div>
			                    <div id="idList"> </div>
			                    <div id="idHandle3" class="handle2"></div>
			                </div>
			                <div class="summary">
	                     		<div class="summary_wrap">
		                     		<p>
		                        	<span class="goods_code"><span class="tt">产品名称：</span>${product.prodName}</span>
		                        	<span class="goods_code"><span class="tt">产品编码：</span>${product.prodCode}</span>
		                        	<span class="goods_code"><span class="tt">上架时间：</span>${product.createDate}</span>
		                        	</p>
	                        	</div>
	                        </div>
	                        <script type="text/javascript">
	
								(function(){
								var iz = new ImageZoom( "idImage2", "idViewer2", {
									mode: "handle", handle: "idHandle3"
								});
								
								var arrPic = [], list = $$("idList"), image = $$("idImage2");
								
								arrPic.push({ smallPic: "${base}${product.picture}_S.jpg", originPic: "${base}${product.picture}_L.jpg", zoomPic: "${base}${product.picture}_XL.jpg" });
								
								<#if product.pic2?? && product.pic2!="" >
								arrPic.push({ smallPic: "${base}${product.pic2}_S.jpg", originPic: "${base}${product.pic2}_L.jpg", zoomPic: "${base}${product.pic2}_XL.jpg" });
								</#if>
								
								<#if product.pic3?? && product.pic3!="" >
								arrPic.push({ smallPic: "${base}${product.pic3}_S.jpg", originPic: "${base}${product.pic3}_L.jpg", zoomPic: "${base}${product.pic3}_XL.jpg" });
								</#if>
								<#if product.pic4?? && product.pic4!="" >
								arrPic.push({ smallPic: "${base}${product.pic4}_S.jpg", originPic: "${base}${product.pic4}_L.jpg", zoomPic: "${base}${product.pic4}_XL.jpg" });
								</#if>
								
								$$A.forEach(arrPic, function(o, i){
									var img = list.appendChild(document.createElement("img"));
									img.src = o.smallPic;
									img.onmouseover = function(){
										iz.reset({ originPic: o.originPic, zoomPic: o.zoomPic });
										$$A.forEach(list.getElementsByTagName("img"), function(img){ img.className = ""; });
										this.className = "on";
									}
									if(!i){ img.onmouseover(); }
								});
								
								})();
							
							</script>
						</div>
						
						<div class="clear"></div>
						
						<ul class="tabs">
			                <li><a href="javascript:void(0);">商品详情</a></li>
			            </ul>
						
						<div class="panes">
			            	<!-- 商品详情 -->
			                <div class="goods_detail">
			                    <div class="word">${product.desc}</div>
			                </div>
			            </div>
						<script> 
						$(function() {
							$("ul.tabs").tabs("div.panes > div");
						});
						</script>
					</div>
				</div>
				<div class="page-left">
					<#include "/WEB-INF/mall/${language}/side.html" parse=true>
				</div>
			</div>
			<#include "/WEB-INF/mall/${language}/bottom.html" parse=true>
		</div>
	</body>
</html>